<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>静态轮播图</title>
	<link rel="stylesheet" type="text/css" href="css/1.css"/>
	<script src="js/1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="container">

        <img class="on" src="./img/白金之星.webp" />
        <img src="./img/世界.webp" />
        <img src="./img/疯狂钻石.webp" />
        <img src="./img/杀手皇后.webp" />
		<img src="./img/黄金体验.webp" />
		<img src="./img/绯红之王.webp" />

        <div class="left"><</div>
        <div class="right">></div>

        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
			<li></li>
			<li></li>
        </ul>
    </div>

<script type="text/javascript">
	var aImgs = document.querySelectorAll('.container img');
	var aLis = document.querySelectorAll('.container li');
	var btnLeft = document.querySelector('.container .left');
	var btnRight = document.querySelector('.container .right');
	
	var index = 0;
	var lastIndex = 0;
	btnRight.onclick = function(){
	
	    lastIndex = index;
	
	    aImgs[lastIndex].className = '';
	    aLis[lastIndex].className = '';
	    index++;
	    index %= aImgs.length;
	
	    aImgs[index].className = 'on';
	    aLis[index].className = 'active';
	}
	
	btnLeft.onclick = function(){
	
	    lastIndex = index;
	
	    aImgs[lastIndex].className = '';
	    aLis[lastIndex].className = '';
	    index--;
	    if (index < 0) {
	        index = aImgs.length - 1;
	    }
	
	    aImgs[index].className = 'on';
	    aLis[index].className = 'active';
	}
</script>
</body>
</html>
